<template>
  <div class="occupation-form">
    <el-form ref="form" :model="form" label-width="120px" label-position="left">
      <el-form-item label="职位名称"  style="width: 500px;">
        <el-input v-model="form.occupationName" placeholder="请输入职位名称"></el-input>
      </el-form-item>
      <el-form-item label="职位类别" >
        <el-select v-model="form.occupationCategory" placeholder="请选择职位类别">
          <el-option label="科技" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="职位所在城市">
        <el-select v-model="form.occupationCity" placeholder="请选择职位所在城市">
          <el-option label="合肥" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="职位详细地址" >
        <el-input v-model="form.occupationLocation" placeholder="请输入职位详细地址"></el-input>
      </el-form-item>
      <el-form-item label="职位所需学历">
        <!-- <el-input v-model="form.occupationDegree"></el-input> -->
        <el-select
                    v-model="form.occupationDegree"
                    filterable
                    placeholder="请选择所需学历"
                    @change="handleDegreeChange"
                >
                    <el-option
                        v-for="item in degree"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
      </el-form-item>
      <el-form-item label="职位所需经验" style="width: 300px;" >
        <el-input v-model="form.occupationExperience" ></el-input>
      </el-form-item>
      <el-form-item label="职位薪水" style="width: 300px;">
        <el-input v-model="form.occupationSalary" ></el-input>
      </el-form-item>
      <el-form-item label="职位概述" >
        <el-input type="textarea" v-model="form.occupationProfile" placeholder="请描述职位的基本情况"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-edit" @click="onSubmit">发布职位</el-button>
        <el-button type="info" style="width: 135px" @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
let degree = require('@/assets/degree-code.json')
export default {
  data() {
    return {
      form: {
        occupationName: '',
        occupationCity:"",
        occupationCategory:"",
        occupationLocation:"",
        occupationProfile:"",
        occupationDegree:"",
        occupationExperience:"",
        occupationSalary:"",
      },
      enterpriseId: 0,
      degree:degree
    }
  },
  methods: {
    async onSubmit() {
      // 调用保存方法
      await this.releaseOccupation();
    },
    async releaseOccupation() {
      try {
        // 构造要提交的数据
        const postData = {
          occupationName: this.form.occupationName,
          occupationCategory: this.form.occupationCategory,
          occupationCity: this.form.occupationCity,
          occupationLocation: this.form.occupationLocation,
          occupationDegree: this.form.occupationDegree,
          occupationExperience: this.form.occupationExperience,
          occupationSalary: this.form.occupationSalary,
          occupationProfile: this.form.occupationProfile,
          occupationEnterprise:this.enterpriseId,
        };
        // 发送 POST 请求保存数据
        const response = await this.$axios.post("/occupation/addOccupation", postData);

        // 如果后端成功返回了消息，显示成功提示
        if (response.data && response.data==="企业增加职位成功") {
          this.$message.success('发布职位成功');
        }
      } catch (error) {
        this.$message.error('发布职位失败，请稍后重试');
        // 可以根据需要处理保存失败后的逻辑
      }
    },
    onCancel() {
      // 取消按钮点击事件，清空表单数据
      this.form.occupationName = '';
      this.form.occupationCategory = '';
      this.form.occupationCity = '';
      this.form.occupationLocation = '';
      this.form.occupationDegree = '';
      this.form.occupationExperience = '';
      this.form.occupationSalary = '';
      this.form.occupationProfile = '';
    },
    handleDegreeChange(value) {
            this.form.occupationDegree = value
            this.$message(value)
    },
  },
  created() {
    // 在组件创建时获取传递过来的id值
    this.enterpriseId = this.$route.query.enterpriseId;
  },
}
</script>

<style scoped>
.occupation-form {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
  border-radius: 20px;
  font-family: "微软雅黑", Arial, sans-serif; /* 设置字体为微软雅黑 */
  background: #ececec;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 调整输入框的样式 */
.el-input {
  font-size: 18px; /* 调整字体大小 */
  border-color: #000000; /* 调整边框颜色 */
  background-color: #f0f9eb; /* 调整背景色 */
}

</style>